<script>
    import { onMount, beforeUpdate,afterUpdate,onDestroy,tick,setContext } from "svelte";
    import SlotComp from "@/components/slotComp.svelte";
    let items = ['a','b','c','d'];
    onMount(() => {
        //  component挂载到DOM后立即执行
        console.log("onMount执行...");
    });
    beforeUpdate(() => {
        //  运行在 component渲染之前
        console.log("beforeUpdate执行...");
    });
    afterUpdate(()=>{
        // 运行在 component渲染之后
        console.log("afterUpdate执行...")
    })
    onDestroy(()=>{
        // 运行在 component卸载后
        console.log('onDestroy执行...') 
    })
    // tick返回一个promise，该promise将在应用state变更后返回resolves，或者在下一个微任务中（如果没有）更改
    beforeUpdate(async () => {
		console.log('正常执行');
		await tick();
		console.log('最后执行');
	});
    // setContext 父级声明之后在子集使用getContext获取
    setContext('answer', 42);
    // createEventDispatcher
    const callbackFunction = (e)=>{
          // 类似于vue中emit,on做父子通信 
          console.log(e.detail);
    }
</script>

<SlotComp {items} let:item={item} on:notify="{callbackFunction}">
    <!-- 这里是存在作用域的 -->
    <!-- 具名插槽 -->
    <div slot='item'>{item}</div>
</SlotComp>